import React, { useRef, Component } from 'react';
import * as THREE from 'three';
import { assets } from './utils/assets';
import Resources from './utils/Resources';
import World from './World/World';
import Camera from './Camera';
import Renderer from './Renderer';
import Time from './utils/Time';
import Size from './utils/Sizes';
import style from './FrozenStation.css';

let infoData = [
    { title:'冷量', value:213.4, unit:'kw' },
    { title:'回水温度', value:36.3, unit:'℃'},
    { title:'出水温度', value:26.3, unit:'℃'},
    { title:'压力', value:21.3, unit:'bar'},
    { title:'瞬时流量', value:4282, unit:'m³/h'}
];
let alarmData = [
    { title:'告警', value:'出水压力越限', unit:'' },
    { title:'详情', value:'目标2bar, 实际6bar;', unit:'' },
    { title:'时间', value:'2023-12-16 18:00', unit:'' }
]
export default class Scene extends Component  {
    static instance;
    constructor(){
        super();
        if ( Scene.instance ) {
            return Scene.instance;
        }
        Scene.instance = this; 
        this.info = {};
    }
    resize(){
        this.camera.resize();
        this.renderer.resize();
    }
    update(){
        // this.camera.update();
        this.world.update();       
        this.renderer.update(); 
    }
   
    componentDidMount(){
        let container = document.getElementById('scene');
        let canvas = document.createElement('canvas');
        canvas.width = container.width;
        canvas.height = container.height;
        this.sizes = new Size(container);
        this.container = container;
        this.canvas = canvas;
        this.scene = new THREE.Scene();
        this.camera = new Camera();
        this.renderer = new Renderer();
        this.resources = new Resources(assets);
        this.world = new World();
        this.time = new Time();
        this.time.on('update', ()=>{
            this.update();
        });
        this.sizes.on('resize', ()=>{
            this.resize();
        })
        container.appendChild(this.canvas);
    }
    render(){
        return (
            <div id='scene' ref={this.containerRef} style={{ height:'100%' }}>
                {/* 场景开发中... */}
                {/* 模态数据窗口 */}
                <div className={style['info-container']}>
                    <div className={style['info-title']}>制冷站冷量计</div>
                    <div className={style['info-content']}>
                        {
                            infoData.map((item, index)=>(
                                <div key={index} className={style['info-item']}>
                                    <div>{ item.title }</div>
                                    <div className={style['symbol']}></div>
                                    <div style={{ fontSize:'1.2rem', color:'#fff' }}>{ item.value + item.unit }</div>
                                </div>
                            ))
                        }
                    </div>
                </div>
                <div className={style['info-container'] + ' ' + style['alarm']}>
                    <div className={style['info-title']}>水泵3</div>
                    <div className={style['info-content']}>
                        {
                            alarmData.map((item, index)=>(
                                <div key={index} className={style['info-item']}>
                                    <div>{ item.title }</div>
                                    <div className={style['symbol']}></div>
                                    <div style={{ fontSize:'1.2rem', color:'#fff' }}>{ item.value + item.unit }</div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        )
    }
}
